<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="renderer" content="webkit">
<link rel="stylesheet" href="<%=path%>/css/pintuer.css">
<link rel="stylesheet" href="<%=path%>/css/admin.css">
<link rel="shortcut icon" href="<%=path%>/images/login.jfif">
<script src="<%=path%>/js/jquery.js"></script>
<!-- 引入zTree插件 -->
<link rel="stylesheet" type="text/css"
	href="<%=path%>/third/zTree_v3/css/zTreeStyle/zTreeStyle.css">
<script type="text/javascript"
	src="<%=path%>/third/zTree_v3/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript"
	src="<%=path%>/third/zTree_v3/js/jquery.ztree.core.js"></script>
<script type="text/javascript"
	src="<%=path%>/third/zTree_v3/js/jquery.ztree.excheck.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		//重新绑定表单提交
		$("#add_btn").bind("click", function() {
			$('form').submit();
		});

	});
</script>

</head>

<body>
	<div class="panel admin-panel">
		<div class="panel-head" id="add">
			<strong><span class="icon-pencil-square-o"></span>修改行政区域信息</strong>
		</div>
		<div class="body-content">
			<form id="form-addrole" method="post" class="form-x" action="">
				<input id="fid" name="fid" value="" type="hidden" />
				<div class="form-group">
					<div class="label">
						<label>行政区域编号：</label>
					</div>
					<div class="field">
						<input type="text" class="input w50" value="${area.area_id}" disabled="disabled"
							name="area_id" id="area_id_input"
							data-validate=" required:请输入行政区域编号" /> <span></span>
						<div class="tips"></div>
					</div>
				</div>
				<div class="form-group">
					<div class="label">
						<label>行政区域名称：</label>
					</div>
					<div class="field">
						<input type="text" class="input w50" value="${area.area_name}"
							name="area_name" id="area_name_input"
							data-validate=" required:请输入行政区域名称" />
						<div class="tips"></div>
					</div>
				</div>

				<div class="form-group">
					<div class="label">
						<label>上级行政区域名称：</label>
					</div>
					<div class="field">
						<input type="text" class="input w50"
							value="${fatherarea.area_name}" name="father_area_name"
							id="father_area_name_input"
							data-validate=" required:请输入行政区域名称" />
						<div class="tips"></div>
					</div>
				</div>

				<div class="form-group">
					<div class="label">
						<label>选择上级行政区域：</label>
					</div>
					<div class="field">
						<input type="hidden" id="father_id" name="father_id" value="" />
						<input type="hidden" id="area_rank" name="area_rank" value="" />
						<div>
							<ul id="zTree" class="ztree"></ul>
						</div>
						<div class="tips"></div>
					</div>
				</div>

				<div class="form-group">
					<div class="label">
						<label></label>
					</div>
					<div class="field">
						<button id="update_btn" class="button bg-main icon-check-square-o"
							type="button" onclick="updateArea()">提交</button>
					</div>
				</div>
			</form>
		</div>
	</div>


	<script type="text/javascript">
		//异步加载树形行政区域信息
		var setting = {
			data : {
				simpleData : {
					enable : true,
					idKey : "area_id",
					pIdKey : "father_id",
					rootPId : -1
				},
				key : {
					name : "area_name"
				}
			},
			check : {
				enable : true,
				chkStyle : "checkbox",
				chkboxType : {
					"Y" : "",
					"N" : "s"
				}
			},
	
			async : {
				type : "post",
				enable : true,
				url : "<%=path%>/area/areadata_load?area_id=${area.area_id}",
			}
		};
		$(document).ready(function() {
			$.fn.zTree.init($("#zTree"), setting);
		});
		//校验行政区域编号是否重复
		$("#area_id_input").change(function() {
			var area_id = this.value;
			$.ajax({
				url : "<%=path%>/area/area_check",
				type : "post",
				data : {
					area_id : area_id
				},
				success : function(res) {
					console.log(res);
					if (res.code == 100) {
						show_validate_msg("#area_id_input", "success", "区域编号可用");
					}
					show_validate_msg("#area_id_input", "error", "区域编号不可用");
				}
			})
		});
		//校验结果提示信息
		function show_validate_msg(ele, status, msg) {
			//清除当前元素的校验状态
			$(ele).next("span").text("");
			if ("success" == status) {
				$(ele).next("span").text(msg);
			} else if ("error" == status) {
				$(ele).next("span").text(msg);
			}
		}
	
		function updateArea() {
			var area_id = $("#area_id_input").val();
			var area_name = $("#area_name_input").val();
			var treeObj = $.fn.zTree.getZTreeObj("zTree");
		    var nodes = treeObj.getCheckedNodes(true);
		      if(nodes.length == 0 ){
		          alert("请选择上级行政区域!")
		             }else{
		                var father_id = "";
		                     var father_area_rank = 0;
		           $.each(nodes,function(i,node){
		            father_id+=node.area_id;
		              father_area_rank+=node.area_rank;
		 });
		     console.log(father_id);
		      $.ajax({
		         url:"<%=path%>/area/area_update_action",
		         type:"post",
		         data:{area_id:area_id,
		                   area_name:area_name,
		                   father_id:father_id,
		                   father_area_rank:father_area_rank},
		         success:function(res){
		            if(res.code==100){
		              alert("更新成功");
		            }else{
		              alert("更新失败");
		            
		            }
		         
		         }
		      });
		}
	}
	</script>

</body>
</html>
